<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>loading</title>
        <style media="screen">
        .dotting-box-shadow {
            display: inline-block; min-width: 2px; min-height: 2px;
            box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9+, ..., 3个点 */
            animation: dotboxshadow 4s infinite step-start both; /* for IE10+, ... */
            *zoom: expression(this.innerHTML = '...'); /*  for IE7. 若无需兼容IE7, 此行删除 */
        }
        .dotting-box-shadow:before { content: '...'; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
        .dotting-box-shadow::before { content: ''; } /* for IE9+ 覆盖 IE8 */
        :root .dotting-box-shadow { margin-right: 8px; } /* for IE9+,FF,CH,OP,SF 占据空间*/

        @keyframes dotboxshadow {
            25% { box-shadow: none; }                                  /* 0个点 */
            50% { box-shadow: 2px 0 currentColor; }                    /* 1个点 */
            75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ }
        }
        </style>
        <style media="screen">
        .dotting-background {
            display: inline-block; width: 10px; min-height: 2px;
            padding-right: 2px;
            border-left: 2px solid currentColor; border-right: 2px solid currentColor;
            background-color: currentColor; background-clip: content-box;
            box-sizing: border-box;
            animation: dotbackground 4s infinite step-start both;
            *zoom: expression(this.innerHTML = '...'); /* IE7 */
        }
        .dotting-background:before { content: '...'; } /* IE8 */
        .dotting-background::before { content: ''; }
        :root .dotting-background { margin-left: 2px; padding-left: 2px; } /* IE9+ */

        @keyframes dotbackground {
            25% { border-color: transparent; background-color: transparent; }          /* 0个点 */
            50% { border-right-color: transparent; background-color: transparent; }    /* 1个点 */
            75% { border-right-color: transparent; }                                   /* 2个点 */
        }
        </style>

    </head>
    <body>

        <h3>loading-box-shadow <span class="dotting-box-shadow"></span></h3>
        <h3>loading-background <span class="dotting-background"></span></h3>
    </body>
</html>
